<template>
	<div class="active">
		<div class="active__title">
		     {{message}}
		</div>
	 <p>
  
      <router-link to="/active/20161122">Go to Foo</router-link>
       <router-link to="/active/20161111">Go to Bar</router-link>
     </p>
		 <!-- <transition name="router-slid" mode="out-in"> -->
	    <router-view></router-view>
	     <!-- </transition> -->
     </div>
</template><!-- //header这个被渲染的组件，内部包含一个自己的内嵌的router-view，那个这个通过路由的操控是通过vuerouter中的children来配置的 -->
<script>
export default {
    data(){
            return{
               message:"active 页面的入口"
            }
    },
    created(){
        
    },
};
</script>
<style lang="scss" scoped>
@import 'src/common/styles/mixins';

    .router-slid-enter-active, .router-slid-leave-active {
        transition: all .4s;
    }
    .router-slid-enter, .router-slid-leave-active {
        transform: translate3d(2rem, 0, 0);
        opacity: 0;
    }
    .active__title{
    	font-size:px2rem(42);
        line-height: px2rem(66);
    	color:#ff651a;
    	background: #ffffff;
    	text-align: center;
    }
</style>
